<script type="text/javascript">
	$(document).ready(function(){
		var root_path = '<?php echo _SITE_ADMIN_URL_?>';
		$('#category_id').change(function(){
			var category_id = $(this).val();
			path = root_path+'ajax/getGeo.php?id='+category_id+'&type=subcategory';
			$.ajax({url: path,	
				success: function(response) {
					$('#parent_id').html(response);
				}
			});
			
		});
	});
</script>
<!-- Example table -->
<div class="container_12"> 
    <div class="module">
        <h2><span>Add Sub Sub Category</span></h2>
        <div class="module-body">
            <div style="margin-top:13px;">
                <?php
                if(isset($errMsg)){?>
                    <span class="notification"><?php echo $_MESSESGE[$errMsg];?></span>
                <?php }?>
			</div>
                        
            <form id="adminForm" name="admin_frm" action="" method="post" enctype="multipart/form-data">
				<p>
					<label>Category</label>
					<select class="input-short" id="category_id" name="category_id">
						<option value="">Select Category</option>
						<?php
						foreach($main_categories as $key => $val){
							$selected = ($val['id'] == $parent_id)?'selected':'';?>
							<option value="<?php echo $val['id']; ?>" <?php echo $selected; ?>><?php echo $val['name']; ?></option>
						<?php } ?>
					</select>
				</p>
				<p>
					<label>Sub Category</label>
					<select class="input-short" id="parent_id" name="parent_id">
						<option value="">Select Sub Category</option>
						<?php
						foreach($sub_categories as $key => $val){
							$selected = ($val['id'] == $category_id)?'selected':'';?>
							<option value="<?php echo $val['id']; ?>" <?php echo $selected; ?>><?php echo $val['name']; ?></option>
						<?php } ?>
					</select>
				</p>
				<p>
					<label>Sub-Sub-Category Name</label>
					<div id="availability_info"></div>
					<input type="text" class="input-short check_availability" name="name" value="<?php echo $_POST['name'];?>" />
					<!--  <span class="notification-input ni-correct">This is correct, thanks!</span> -->
				</p>  
                <label>Category Attributes  &nbsp; <a href="javascript: void(0);" onclick="javascript: addRow();">Add More Attribute</a></label>
                <table style="width:500px;border:0 none;" id="attributeTbl"><tbody><tr><td style="border:0 none;"><strong>Attribute</strong></td><td style="border:0 none;"><strong>Compulsary</strong></td><td style="border:0 none; width:220px;"><strong>Unit</strong></td></tr>
                
                <tr><td style="border:0 none;">
                <select id="attribute_1" name="attributes[]"><?php echo $attributeStr; ?></select></td><td style="border:0 none;"><input type="checkbox" value="1" name="comp_0"></td><td style="border:0 none;"><select id="unit_1" name="unit[]" class="input-medium"> <?php echo $unitStr;?></select></td></tr>
                
                
                
                </table>
                

				<fieldset>
					<input class="submit-green" type="submit" name="submit" value="Submit" /> 
				   <input class="submit-gray" type="button" value="Cancel" onclick="javascript: window.location='<?php echo $cancleURL;?>'" />
				</fieldset>
			</form>
		</div> <!-- End .module-body -->
	</div>  <!-- End .module -->
</div>
<div style="clear:both;"></div>
<script type="text/javascript">
	var root_path = '<?php echo _SITE_ADMIN_URL_?>';
	var table = 'category';
	var field = 'name';
    
    var formFields = new Array('category_id','parent_id', 'name');
    var staticInfo = new Array();
    staticInfo['root_path']  = '<?php echo _SITE_ADMIN_URL_?>';
    staticInfo['table']  = 'category';
    staticInfo['field']  = 'name';
	
	jQuery.validator.addMethod(
		"selectCategoryNone",
		function(value, element) {
			if (element.value == ""){
				return false;
			}
			else return true;
		},
		"Please select a category."
	);
	
	jQuery.validator.addMethod(
		"selectSubCategoryNone",
		function(value, element) {
			if (element.value == ""){
				return false;
			}
			else return true;
		},
		"Please select a sub category."
	);
	
	$().ready(function() {       
        
		$("#adminForm").validate({
			rules: {
				category_id: {
					selectCategoryNone: true
				},
				parent_id: {
					selectSubCategoryNone: true
				},
				name: "required"
			 },
			messages: {
				name: "Please enter sub sub category name",
			}
		});
	});
    var counter = 2;    
    function addRow(){                    
        $("#attributeTbl").append('<tr id="row_'+counter+'">test</tr>');
        $("#row_"+counter).html('<td style="border:0 none;"><select id="attribute_'+counter+'" name="attributes[]">'+'<?php echo $attributeStr;?>'+'</select></td><td style="border:0 none;"><input type="checkbox" name="comp_'+counter+'" value="1"></td><td style="border:0 none;"><select id="unit_'+counter+'" name="unit[]" class="input-medium">'+'<?php echo $unitStr;?>'+'</select>&nbsp;<a href="javascript: void(0);" onclick="javascript: removeRow('+counter+');">Remove Attribute</a></td>');
        counter++;
    }    
    
    function removeRow(id){
        $("#row_"+id).remove();
    }
    
</script>
<script type="text/javascript" src="<?php echo _ADMIN_JS_; ?>check_availability.js"></script>
